<template>
	<view class="page-body paround40">
		<view class="h2">更换预留手机</view>
		<view class="unbindcard">
			<view class="line-t flex">
				<view class="tag">银行名称</view>
				<view class="value">中国建设银行</view>
			</view>
			<view class="line-t flex">
				<view class="tag">银行卡号</view>
				<view class="value">6228 8987 7676 676</view>
			</view>
			<view class="line-t flex">
				<view class="tag">手机号码</view>
				<view class="value">188 6666 8686</view>
			</view>
		</view>
		<view class="input-row-s flex mt15" >
			<input type="text" placeholder="请输入新银行预留手机号" @input="bindPhone" placeholder-style="color:#c7c7c7" maxlength="16" v-model="phoneNum" />
		</view>
		<view class="input-row-s flex " >
			<input type="password" maxlength="6" placeholder="请输入交易密码" @input="bindWord" placeholder-style="color:#c7c7c7"  v-model="pwd"/>
		</view>
		<view :class="['button',isNextStep?'primary':'disabled']" :disabled="!isNextStep" @click="nextStep">确认</view>
	</view>
</template>

<script>
	var that;
	import {isPoneAvailable,trim} from '@/utils/utils.js';
	export default{
		data(){
			return{
				isNextStep:false,
				phoneNum:"",
				pwd:""
			}
		},
		computed:{
			i18n(){
				return this.$t('login')
			}
		},
		methods:{
			nextStep(){
				let phoneNum=this.phoneNum;
				let pwd=this.pwd;
				if(this.isNextStep){
					// this.$https.POST({
					// 	url:'/public/logout',
					// 	data:{
					// 	},
					// 	success(res){
					// 	}
					// })
					uni.navigateBack({
						delta:1
					})
				}else{
					if(!isPoneAvailable(phoneNum)){
						this.$showToast("手机号码填写有误")
						return false;
					}
					if(pwd.length<6||pwd.length>6){
						this.$showToast('请输入6位交易密码')
						return false;
					}
					
				}
			},
			bindPhone(e){
				let value=e.detail.value;
				this.phoneNum=value;
				let pwd=this.pwd
				if(isPoneAvailable(value)&&pwd.length==6){
					this.isNextStep=true
				}else{
					this.isNextStep=false
				}
			},
			bindWord(e){
				let value=e.detail.value;
				let phoneNum=this.phoneNum;
				if(value.length==6&&isPoneAvailable(phoneNum)){
					this.isNextStep=true;
				}else{
					this.isNextStep=false;
				}
			}
		},
		onLoad(options){
			that=this
		},
		onShow(options){
			
		}
		
	}
		
</script>

<style lang="scss" scoped="">
	// @import '../../logins/logins.css';
	@import '../../../static/css/user.css';
	.unbindcard{
		background: #fafafa; padding: 20upx 30upx; 
		.line-t{
			line-height:65upx;
			.tag{color: #a9b0c0;width: 180upx;font-size: 30upx;}
			.value{color: #000000;font-size: 30upx;}
		}
	}
	.textcode{border-bottom: 1px solid #e9e9e9;height:112upx; 
		input{padding-top: 8upx;}
	}
	.button{margin-top:70upx; }
	.input-row-s{
		line-height: 110upx; height: 110upx;
		input{font-size: 30upx;}
	}
</style>
